<template>
  <s-layout title="核销二维码">
    <view class="lottery-result-container">
      <view class="card">
      	<view class="top1">
      		券码
      	</view>
		<view class="top2">
			{{ state.lottery.code }}
			<view class="yuan1"></view>
			<view class="yuan2"></view>
		</view>
		<view class="top3">
			<view class="ercodecls">
				<image
				class="ercode"
				:src="state.lottery.qr_code"
				></image>
				<image
				class="writeof"
				src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250403/6ee73ab8154f43328e5442686cdb9bfa.png"
				v-if="state.lottery.status != 0"
				></image>
			</view>
			
		</view>
		<view class="top4">
			请前往指定可核销商家进行核销
		</view>
      </view>
	  <view class="card">
	  	<view class="top1">
	  		可核销商家
	  	</view>
		<template v-for="item in state.lottery.shop_list" :key="item.id">
			<view class="listcls" v-if="item.name && item.address">
				<view class="list1">
					{{ item.name }}
				</view>
				<view class="list2">
					{{ item.address }}
				</view>
			</view>
		</template>
	  </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  let state = reactive({
    lottery: {},
  });

  const getRecordList = async (id) => {
	  const res = await sheep.$api.prize_week.lotterycode(id)
	  state.lottery = res.data
  }

  onLoad((id) => {
    // getRecordList(13685)
    getRecordList(id.id)
  });
</script>

<style lang="less" scoped>
.lottery-result-container{
  background-color: #f2f3f6;
  font-family: PingFang SC;
  padding-bottom: 20rpx;
  .card{
	  width: 90%;
	  margin-left: 5%;
	  margin-top: 20rpx;
	  background-color:#FFFFFF;
	  border-radius: 20rpx;
	  .top1{
		  padding-top: 20rpx;
		  width: 95%;
		  margin-left: 5%;
		  font-weight: bold;
		  font-size: 28rpx;
	  }
	  .top2{
	  		  padding-top: 20rpx;
	  		  padding-bottom: 20rpx;
	  		  width: 90%;
	  		  margin-left: 5%;
	  		  font-weight: bold;
	  		  font-size: 28rpx;
			  border-bottom: 1px dashed #D1D1D1;
			  position: relative;
			  .yuan1{
				  width:30rpx;
				  height:30rpx;
				  position: absolute;
				  background-color: #f2f3f6;
				  border-radius: 50%;
				  bottom: -15rpx;
				  right: -43rpx;
			  }
			  .yuan2{
			  	  width:30rpx;
			  	  height:30rpx;
			  	  position: absolute;
			  	  background-color: #f2f3f6;
			  	  border-radius: 50%;
			  	  bottom: -15rpx;
			  	  left: -43rpx;
			  }
	  }
	  .top3{
		  width: 100%;
		  padding-top: 20rpx;
		  padding-bottom: 20rpx;
		  display: flex;
		  justify-content: center;
		  .ercodecls{
			  width: 228rpx;
			  height: 228rpx;
			  position: relative;
			  .ercode{
				width: 228rpx;
				height: 228rpx;
			  }
			  .writeof{
				  position: absolute;
				  right: 0%;
				  bottom: 0%;
				  width: 150rpx;
				  height: 150rpx;
			  }
		  }
		  
	  }
	  .top4{
		  width: 100%;
		  padding-bottom: 20rpx;
		  font-size: 24rpx;
		  font-weight: bold;
		  text-align: center;
	  }
	  .listcls{
		  padding: 20rpx 5%;
		  width: 90%;
		  border-bottom: 1px solid #E5E5E5;
	  }
  }
}
.list1{
			  width: 100%;
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  padding-bottom: 20rpx;
			  font-size: 28rpx;
			  font-weight: bold;
		  }
		  .list2{
		  	  width: 100%;
		  	  font-size: 24rpx;
		  }
</style>
